<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 学科管理
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" class="handle-del mr10" @click="handleEdit(0,{})">新增学科
				</el-button>
				<el-input v-model="query.name" placeholder="科目名称" class="handle-input mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
				<el-table-column prop="name" label="报考科目" align="center"></el-table-column>
				<el-table-column prop="description" label="副标题" align="center"></el-table-column>
				<el-table-column prop="sort" label="排序" align="center"></el-table-column>
				<el-table-column label="操作" width="200" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNumber"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="title" :visible.sync="editVisible" width="40%">
			<el-form :rules="rules" ref="form" :model="form" label-width="100px">
				<el-form-item label="科目名称" prop="name">
					<el-input v-model="form.name" placeholder="科目名称"></el-input>
				</el-form-item>
				<el-form-item label="副标题">
					<el-input v-model="form.description" placeholder="副标题"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model="form.sort" placeholder="排序"></el-input>
				</el-form-item>
				<!-- 	<el-form-item label="小程序标题" prop="title">
					<el-input v-model="form.title" placeholder="展示在小程序头部"></el-input>
				</el-form-item>
				<el-form-item label="APPID" prop="appid">
					<el-input v-model="form.appid" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="secret" prop="secret">
					<el-input v-model="form.secret" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="商户号" prop="mchId">
					<el-input v-model="form.mchId" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="商户秘钥" prop="mchKey">
					<el-input v-model="form.mchKey" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="秘钥路径" prop="keyPath">
					<el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="true"
						:on-success="handleUploadSuccess">
						<i class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<el-input v-model="form.keyPath" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="APP LOGO" prop="logo">
					<el-upload class="avatar-uploader" :action="uploadUrlLogo" :show-file-list="false"
						:on-success="handleUploadLogoSuccess">
						<i class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<el-input v-model="form.logo" placeholder=""></el-input>
				</el-form-item> -->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit('form')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'basetable',
		data() {
			return {
				editVisible1: false,
				uploadUrl: this.$host + '/admin/upload/uploadPrivate?token=' + localStorage.getItem('htk_token'),
				uploadUrlLogo: this.$host + '/admin/oss/uploadImage?token=' + localStorage.getItem('htk_token'),
				query: {
					name: '',
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				editCityVisible: false,
				pageTotal: 0,
				form: {
					id: '',
					name: '',
					appid: '',
					secret: '',
					description: '',
					title: '',
					mchId: '',
					mchKey: '',
					keyPath: ''
				},
				idx: -1,
				id: -1,
				Authorization: {
					'Authorization': localStorage.getItem('htk_token')
				},
				token: localStorage.getItem('htk_token'),
				title: '',
				rules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					appid: [{
						required: true,
						message: '请输入appid',
						trigger: 'blur'
					}],
					secret: [{
						required: true,
						message: '请输入秘钥',
						trigger: 'blur'
					}],
					mchId: [{
						required: true,
						message: '请输入商户号',
						trigger: 'blur'
					}],
					mchKey: [{
						required: true,
						message: '请输入商户秘钥',
						trigger: 'blur'
					}],
					keyPath: [{
						required: true,
						message: '请上传支付证书',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {

			//图片相关
			handleUploadSuccess(res, file) {
				this.form.keyPath = res.data;
			},
			//app logo
			handleUploadLogoSuccess(res, file) {
				this.form.logo = res.data;
			},


			async getData() {
				const res = await this.$get('/admin/minis/pageQuery', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageNumber', 1);
				this.getData();
			},
			// 删除操作
			handleDelete(index, row) {
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$postForm('/admin/minis/deleteMiniApp?id=' + row.id).then(res => {
						if (res.code == 1000) {
							this.$message.success('删除成功')
							this.getData()
						}
					})
				}).catch(() => {});
			},
			// 编辑操作
			handleEdit(index, row) {
				if (row.id) {
					this.idx = index;
					this.form = JSON.parse(JSON.stringify(row));
					this.title = "编辑学科"
				} else {
					this.form = {}
					this.title = "新增学科"
				}
				this.editVisible = true;
			},
			// 保存编辑
			saveEdit(formName) {
				var vm = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$confirm('是否提交数据', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$post('/admin/minis/add', this.form).then(res => {
								if (res.code == 1000) {
									this.$message.success('操作成功')
									this.getData()
									this.form = {}
									this.editVisible = false
								}
							})
						});

					} else {
						this.$message({
							message: '验证失败',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});


			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 160px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 16px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
<style>
	.avatar-uploader .el-upload {
		width: 180px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
</style>